<template>
    <div style="height:100%" ref="qqmessageref">
        <transition name="el-zoom-in-center">
            <div style="height:100%" v-show="!showMessage">
                <!-- wx联系人 -->
                    <div v-if="show" class="contentBoxWx" ref="lianxiren">
                        <div class="headerWX">
                            <div style="text-align: center;font-weight: bold;font-size: 18px;">{{ titleName }}</div>
                            <div v-if="titleName=='QQ'"  style="padding:0 10px;margin-top:5px;"><el-input v-model="searchWord" @keyup.enter.native="onSearchStart1"  placeholder="请输入关键词按回车搜索 QQ"></el-input></div>
                            <div v-if="titleName=='群组'"  style="padding:0 10px;margin-top:5px;"><el-input v-model="searchWord1" @keyup.enter.native="onSearchStart2"  placeholder="请输入关键词按回车搜索群组"></el-input></div>
                        </div>
                        <!-- 聊天对象列表 -->
                        <div v-if="titleName=='QQ'" style="height:70%;flex: 1; min-height: 0; overflow-y: auto;" @scroll="throttleFn">
                          <div class="wxUserItem" v-for="(item,index) in friendListData" :key="index" @click="opemMessageDetials(item,0)">
                            <img @click.stop="openContantInfo(item)" style="border-radius: 10px;margin-left:10px;" :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.username+'&spec=100'" width="55" height="55" alt="">
                            <div style="margin-left: 10px;width: 221px;">
                                <div class="textwx" style="font-weight: bold;"><span v-if="item.nick">{{ item.nick }}</span><span v-if="item.remark">({{ item.remark }})</span></div>
                                <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                                    <span v-if="item.msgType==-1000" :title="item.lastContent">{{ item.lastContent }}</span>
                                    <span v-else>{{$t('wechat.otherMsg')}}:</span>
                                </div>
                            </div>
                            <div class="dateTime">数量:{{item.cnt}} <span style="color:red;" @click.stop="opemMessageDetials(item,1)">({{ item.delCnt }})</span></div>
                          </div>
                        </div>
                        <div v-if="titleName=='群组'" style="flex: 1; min-height: 0; overflow-y: auto;" @scroll="throttleFn">
                          <div class="wxUserItem" v-for="(item,index) in friendListData1" :key="index" @click="opemMessageGroupDetials(item,0)">
                            <img @click.stop="openContantInfo(item)" style="border-radius: 10px;margin-left:10px;" :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.groupname+'&spec=100'" width="55" height="55" alt="">
                            <div style="margin-left: 10px;width: 221px;">
                                <div class="textwx" style="font-weight: bold;" :title="item.groupnick+'('+item.groupname+')'"><span v-if="item.groupnick">{{ item.groupnick }}</span><span v-if="item.groupname">({{ item.groupname }})</span></div>
                                <div class="textwx" style="color: #bdbdbd;margin-top: 5px;">
                                    <span v-if="item.msgType==1">{{ item.lastContent }}</span>
                                    <span v-else>{{$t('wechat.otherMsg')}}:</span></div>
                            </div>
                            <div class="dateTime">数量:{{item.cnt}} <span style="color:red;" @click.stop="opemMessageGroupDetials(item,1)">({{ item.delCnt }})</span></div>
                          </div>
                        </div>
                        <div class="loadingBox" v-if="showLoading" style="color:#2196f3;text-align: center;;margin-bottom:90px;position:relative;z-index:100;"><i :class="loadClass" style="color:#2196f3;margin-top: 30px;margin-bottom:30px;"></i> {{ loadingText }}</div>
                    </div>
                <!-- wx我的 -->
                <div v-if="!show" class="contentBoxWx">
                    <div class="selfInfo">
                        <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+accountData.username+'&spec=100'" style="border-radius: 5px;" width="70" height="70" alt="">
                        <div class="" style="margin-left:15px;">
                            <div style="font-size:20px;margin-bottom:5px;font-weight: bold;">{{ accountData.nick }}</div>
                            <div> QQ号：{{ accountData.alias?accountData.alias:accountData.username }}</div>
                            <div>地区：{{ accountData.province+'-'+accountData.city}}</div>
                            <div> {{$t('wechat.phone')}}：{{ accountData.phone}}</div>
                        </div>
                    </div>
                    <div class="list" style="margin-top:20px;">
                        <div :title="'签名：'+accountData.signature" style="padding-right:10px;height:50px;border-bottom: 1px solid #ededed;line-height: 50px;border-top: 1px solid #ededed;overflow: hidden; text-overflow: ellipsis;white-space: nowrap; "><i class="el-icon-edit-outline"></i> 签名：{{ accountData.signature }}</div>
                        <div style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;"><i class="el-icon-user-solid"></i> 好友({{accountData.friend_totle}})</div>
                        <div style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;"><i class="el-icon-user"></i> 群聊({{ accountData.group_totle }})</div>
                    </div>
                </div>

                <div class="flooterBox" >
                <div class="btn2" @click="openContent('QQ')">
                    <img :src="src" width="45" height="45" alt="">
                </div>
                <div class="btn2" @click="openContent('群组')">
                    <img :src="srcQun"  width="45" height="45" alt="">
                </div>

                <div class="btn2" @click="openContent('我的')">
                    <img :src="srcSelf"  width="45" height="45" alt="">
                </div>
            </div>
            </div>
        </transition>
        <transition name="el-zoom-in-center">
            <!-- 聊天内容 -->
            <div v-show="showMessage">
                <div class="headerMessage" v-show="!showSearchList">
                    <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="black()"><i class="el-icon-arrow-left"></i></div>
                    <div v-if="titleName=='QQ'" style="width: 70%;text-align: center;font-weight: bold;">{{chatWithObj.remark?chatWithObj.remark:chatWithObj.nick}}</div>
                    <div v-if="titleName=='群组'" style="width: 60%;text-align: center;font-weight: bold;">{{chatWithObj.groupnick?chatWithObj.groupnick:chatWithObj.groupname}}</div>
                    <div style="margin-right:10px;cursor: pointer;" v-if="titleName=='群组'" title="群成员" @click="viewsQunCY(chatWithObj)"><img  src="../../../assets/qun.png" alt=""></div>
                    <el-button class="dayin" style="float:right;" type="text" @click="openPrint" :title="$t('wechat.openPrint')" ><i class="el-icon-printer"></i> 打印</el-button>
                    <div class="searchWX" :title="$t('wechat.searchKey')" ref="showSearchIcon" @click="openSearch" ><i class="el-icon-search"></i></div>
                    <transition name="el-zoom-in-top">
                        <div v-show="showSearchBox" ref="myDiv" class="searchWXContent">
                            <el-input class="searchInputWX" v-model="messageSearchWord"  @keyup.enter.native="searchWeChatMessage()" placeholder="输入关键词按回车键搜索聊天内容"></el-input>
                        </div>
                    </transition>
                </div>
                <!-- 内容区 -->
                <div v-show="!showSearchList">
                    <qqMessage ref="qqChatBox" v-if="titleName=='QQ'" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit' />
                    <qqMessageGroup ref="wechatGroupBox" v-if="titleName=='群组'" :chatWithObj="chatWithObj" :recovery="recovery" :accountData="accountData" :offsetLimit='offsetLimit'/>
                </div>
                <div v-if="showSearchList" style="padding:0 10px;">
                    <div class="headerMessage">
                    <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="blackMessageList()"><i class="el-icon-arrow-left"></i></div>
                    <div v-if="titleName=='QQ'" style="width: 86%;text-align: center;font-weight: bold;">查找聊天内容</div>
                </div>
                <!-- 搜索内容区 -->
                <div class="searchContentBox">
                    <div class="remarkListItem" @click="flyRemarkMessageItem(item)" v-for="(item,index) in searchMessageListData" :key="index">
                  
                            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" alt="" width="50" height="50">
                        <div style="width:300px;padding-left:10px;">
                            <div style="color:#bdbdbd;position: relative;">
                                <span style="width:210px;display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; ">{{ item.sendernick?item.sendernick:item.sendername }}</span>
                                
                                <span style="position: absolute;right:0px;">
                                    {{ formateDate(item.msgtime) }}
                                </span>
                            </div>
                            <div style="height:30px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" :title="item.contant" v-html="highlight(item.contant,messageSearchWord)"></div>
                        </div>
                    </div>
                </div>
                    
                </div>
            </div>
        </transition>

        <a-modal
    :maskClosable="false"
    :getContainer="getRefsAff" v-model="visibleGroup" width="80%" title="群成员列表">
           <div style="padding:0 2.5%">
            <a-input-search placeholder="输入关键字搜索" v-model="searchkeyModal" style="width: 200px;margin-bottom:10px;float:right;" @search="initQunList" />
        </div>
       <el-table
    :data="tableData"
    height="60vh"
    border
    style="width: 100%">
    <el-table-column
      prop="username"
      label="账户"
      >
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="昵称"
      >
    </el-table-column>
  </el-table>
   <div class="block">
  </div>
    </a-modal>

    <!-- QQ聊天对象账号信息 -->
   <a-modal
    :maskClosable="false"
    :getContainer="getRefsAff" v-model="accountInfoDetailsShow" width="80%" title="账号信息">
    <div style="display: flex;" v-if="titleName == 'QQ'">
        <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+this.contantData.username+'&spec=100'" width="105" height="105" alt="">
        <div style="margin-left:15px;">
            <div>昵称：{{this.contantData.nick}}</div>
            <div>账号：{{this.contantData.username}}</div>
            <div>地区：{{this.contantData.province+'-'+this.contantData.city}}</div>
            <div>签名：{{this.contantData.signature}}</div>
            <div>
                <div v-if="this.contantData.sex==1">性别：男</div>
                <div v-else-if="this.contantData.sex==2">性别：女</div>
                <div v-else>性别：未知</div>
            </div>
        </div>
    </div>
    <div style="display: flex;" v-if="titleName == '群组'">
        <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+this.contantData.groupname+'&spec=100'" width="105" height="105" alt="">
        <div style="margin-left:15px;">
            <div>昵称：{{this.contantData.groupnick}}</div>
            <div>账号：{{this.contantData.groupname}}</div>
            <div v-if="this.contantData.creatornick">创建者昵称：{{this.contantData.creatornick}}</div>
            <div v-if="this.contantData.creatorname">创建者账号：{{this.contantData.creatorname}}</div>
            <div v-if="this.contantData.ownernick">群主昵称：{{this.contantData.ownernick}}</div>
            <div v-if="this.contantData.ownername">群主账号：{{this.contantData.ownername}}</div>
            <div>群成员数量：{{this.contantData.membercount}}</div>
            <br>
            <div>群公告：{{this.contantData.signature}}</div>
        </div>
    </div>
    </a-modal>
    </div>
</template>
<script>
import qqMessage from './qqChatMessage.vue'
import qqMessageGroup from './qqChatMessageGroup.vue'
import { throttle } from 'lodash';
import { parseTime } from '@/utils/index'
import { getWeChatAccountInfo,getWeChatFriendList,getWeChatGroupList,getWeChatPublicList,getWeChatFriendMessageList,searchFunction,getWeChatGroup_number } from '@/api/weChat/weChat_api'
export default {
    props:['sendData'],
    name: "qqChat",
    components:{
        qqMessage,
        qqMessageGroup,
    },
    data(){
        return{
            contantData:'',
            accountInfoDetailsShow:false,
            searchkeyModal:'',
            visibleGroup:false,
            tableData:[],
            selectld:-1,
            selectType:0, //0下1上
            selectTime:-1,
            isExistsSelectID:1,

            searchMessageListData:[],
            showSearchList:false,
            messageSearchWord:'',
            showSearchBox:false,
            loadClass:'el-icon-loading',
            loadingText:'正在加载. . .',
            showLoading:false,
            srcLogo:require('../../../assets/images/wechatFriend.png'),
            searchWord2:'',
            searchWord1:'',
            active:'QQ',
            recovery:0,
            chatWithObj:'',
            accountData:'',
            friendListData:[],
            friendListData1:[],
            friendListData2:[],
            titleName:'QQ',
            showMessage:false,
            show:true,
            searchWord:'',
            src:require('../../../assets/图标/QQ/qq消息蓝色.png'),
            srcSelf:require('../../../assets/图标/QQ/qq消息.png'),
            srcQun:require('../../../assets/图标/QQ/qq群.png'),
             // 好友
            offset:1,
            limit:25,
            total:0,
            // 群组
            groupOffset:1,
            groupLimit:25,
            totalGroup:0,
            // 公众号
            publicOffset:1,
            publicLimit:15,
            publicTotal:0,
            // 群成员
            groupModalOffset:1,
            groupModalLimit:25,
            groupModalTotal:0,

            // --------------------
            offsetLimit:''
        }
    },
    watch:{
    '$store.state.account.weChat':function(){
        console.log('11111qq',this.sendData.contact_username)
        this.showMessage = false;
      if(this.sendData.list_offset){
        if(this.sendData.app_name=='好友'){
          this.searchWord = this.sendData.contact_username;
          this.offset = 1;
          this.openContent('QQ')
        //   this.offset=this.sendData.list_offset;
          this.limit=this.sendData.list_limit;
        }else if(this.sendData.app_name=='群组'){
          this.searchWord1 = this.sendData.contact_username;
          this.groupOffset=1;
          this.groupLimit=this.sendData.list_limit;
          this.openContent('群组')
            // this.tab='2'
    
            // this.onSearch2()
        }else{
        //   this.tab='3'
        }
      }else{
      // this.offset=1
    this.offset=1;
    this.offset=1;
    this.total=0;

    this.groupOffset=1;
    this.totalGroup=0;

    this.groupModalOffset=1;
    this.groupModalTotal=0;

    this.showSearchList = false;
    this.showSearchBox = false;
    this.showLoading = false;
    this.showMessage = false;
    this.show =true;

    this.searchWord = [];
    // this.openContent('QQ');
    this.openContent('QQ');
    this.friendListData = [];
    this.friendListData1 = [];
      }
    }
  },
  created(){
    //  this.showMessage = false;
    // if(this.sendData.app_name=='好友'){
    //     this.openContent('QQ')
    //     this.offset=this.sendData.list_offset;
    //     this.limit=this.sendData.list_limit;
    // }else if(this.sendData.app_name=='群组'){
    //     this.openContent('群组')
    //     // this.tab='2'
    //     this.groupOffset=this.sendData.list_offset;
    //     this.groupLimit=this.sendData.list_limit;
    //     // this.onSearch2()
    // }else{
    // //   this.tab='3'
    // }
    // this.friendListData = []
    // this.friendListData1 = []
    // let that = this;
    // setTimeout(()=>{
    //     that.init()
    // },500)
    this.showMessage = false;
      if(this.sendData.list_offset){
        if(this.sendData.app_name=='好友'){
          this.searchWord = this.sendData.contact_username;
          this.offset = 1;
          this.openContent('QQ')
        //   this.offset=this.sendData.list_offset;
          this.limit=this.sendData.list_limit;
        }else if(this.sendData.app_name=='群组'){
          this.searchWord1 = this.sendData.contact_username;
          this.groupOffset=1;
          this.groupLimit=this.sendData.list_limit;
          this.openContent('群组')
            // this.tab='2'
    
            // this.onSearch2()
        }else{
        //   this.tab='3'
        }
      }else{
      // this.offset=1
      this.offset=1
      this.offset=1
      this.total=0

      this.groupOffset=1
      this.totalGroup=0

      this.groupModalOffset=1
      this.groupModalTotal=0

      this.showSearchList = false;
        this.showSearchBox = false;
        this.showLoading = false;
        this.showMessage = false;
        this.show =true;

        this.searchWord = [];
        // this.openContent('QQ')
        this.init()
        this.friendListData = []
        this.friendListData1 = []
      }

  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
    methods:{
    openPrint(){
        if(this.titleName=='群组'){
            this.$refs.wechatGroupBox.openPrintModel();
        }else{
            this.$refs.qqChatBox.openPrintModel();
        }
    },
    openContantInfo(item){
        this.contantData = item;
        this.accountInfoDetailsShow = true;
    },
    getRefsAff(){
        return  this.$refs.qqmessageref
    },
    viewsQunCY(data){
        this.initQunList(data)
        this.visibleGroup = true;
    },

    initQunList(item){
      let data={
        proof_num:this.chatWithObj.proof_num,
        groupid:this.chatWithObj.groupid,
        searchkey:this.searchkeyModal,
        offset:1,
        limit:1000,
      }
      getWeChatGroup_number(data).then(res=>{
        this.tableData=res.data
        // this.groupModalTotal=res.data[0].cnt
      })
    },
        domFunction(){
            return this.$refs.qqmessageref
        },
        flyRemarkMessageItem(item){
            switch (this.titleName) {
                case 'QQ':
                this.$refs.qqChatBox.flayRemark(item);
                this.showSearchList = false;
                    break;
                case '群组':
                this.$refs.wechatGroupBox.flayRemarkGrop(item)
                this.showSearchList = false;
                break;
                default:
                    break;
            }

        },
        formateDate(date){
            return parseTime(date);
        },
        highlight(text, keyword) {
            let str = text;
            let newStr = str.replace(keyword, `<span class='highlight' style="color:red;">${keyword}</span>`);
 
            //使用正则表达式全局匹配关键字，将其用 <span> 标签包裹起来，并添加样式
            return newStr;

        },
        blackMessageList(){
            this.showSearchList = false;
        },
        searchWeChatMessage(){
            switch (this.titleName) {
                case 'QQ':
                let data='';

                    data={
                    proof_num:this.chatWithObj.proof_num,
                    account_id:this.chatWithObj.account_id,
                    contactid:this.chatWithObj.username,
                    model:'wechat',
                    recovery:this.recovery,
                    searchkey:this.messageSearchWord,
                    offset:this.offset,
                    limit:2000,
                    selectld:this.selectld,
                    selectType:this.selectType, //0下1上
                    selectTime:this.selectTime,
                    isExistsSelectID:this.isExistsSelectID
                    }

                    searchFunction(data,'/search/tencent/content_new').then(res=>{
                        this.searchMessageListData = res.data;
                        this.showSearchList = true;
                        // // this.$refs.qqChatBox.onSearch(this.messageSearchWord);
                        // // this.messageSearchWord = '';
                        this.showSearchBox = false;
                    })
                    break;
                case '群组':
                let data1='';

                    data1={
                    proof_num:this.chatWithObj.proof_num,
                    account_id:this.chatWithObj.account_id,
                    contactid:this.chatWithObj.groupname,
                    model:'wechat',
                    recovery:this.recovery,
                    searchkey:this.messageSearchWord,
                    limit:2000,
                    selectId:this.selectld,
                    selectType:this.selectType, //0下1上
                    selectTime:this.selectTime,
                    isExistsSelectID:this.isExistsSelectID
                    }

                    searchFunction(data1,'/search/tencent/content_new').then(res=>{
                        this.searchMessageListData = res.data;
                        this.showSearchList = true;
                        // // this.$refs.qqChatBox.onSearch(this.messageSearchWord);
                        // // this.messageSearchWord = '';
                        this.showSearchBox = false;
                    // try{
                    // // this.$refs.messageRef.scrollTop=0;
                    // // this.messageData=res.data.reverse();
                    // let arr = res.data;

                    // for (let index = 0; index < arr.length; index++) {
                    // const element = res.data[index];
                    // this.messageData.push(element)
                    // }

                    // }catch{
                    // }
                    })
                break;
            
                default:
                    break;
            }

        

        },
        handleClickOutside(event) {
            try {
                if (!this.$refs.myDiv.contains(event.target)) {
                // 在这里处理点击除元素外的其他地方触发事件的逻辑
                if(event.target._prevClass !=='el-icon-search' && event.target._prevClass !=='searchWX'){
                    this.showSearchBox = false;
                }else{
                    this.showSearchBox = !this.showSearchBox;
                }
            }
            } catch (error) {
                
            }
          
        },
        openSearch(){
            this.showSearchBox = this.showSearchBox;
        },
        throttleFn: throttle(function(event) {
            // 获取列表元素
            const list = event.target;
            // 判断滚动到底部
            if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
                this.showLoading=true;
                 
                if(this.friendListData.length<this.total){
                this.loadClass = 'el-icon-loading';
                this.loadingText = '正在加载. . .';
                
                // 加载更多数据
                let that = this;
                setTimeout(()=>{
                    switch (that.titleName) {
                        case 'QQ':
                        that.offset++;
                        that.onSearch1();
                            break;
                        case '群组':
                        that.groupOffset++
                        that.onSearch2();
                            break;
                    
                        default:
                            break;
                    }
                },1000)
                }else{
                this.loadClass = 'el-icon-success';
                this.loadingText = '到底了，没有更多了！';
                }
            }
        },1000),

      onSearch2() {
        if(sessionStorage.getItem('searchAll')!==null){
            this.searchWord1 = sessionStorage.getItem('searchAll');
        }
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        searchkey:this.searchWord1,
        model:this.sendData.model,
        offset:this.groupOffset,
        limit:this.groupLimit
      }
      searchFunction(data,'/search/tencent/group').then(res=>{
        if(res.data.length == 0){
            this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return
        }
        //   this.$refs.friendList.scrollTop=0
        for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
          this.friendListData1.push(element)
        }

        this.total=res.data[0].totle;
            
          let d = JSON.parse(sessionStorage.getItem('only'))
        if(this.sendData.app_name=='群组' &&  d == true){
          this.friendListData1.forEach(element=>{
            if(element.groupname==this.sendData.contact_username){
            sessionStorage.setItem('only',false)
              this.opemMessageGroupDetials(element,0,this.sendData.msg_offset,this.sendData.msgtime,this.sendData.id)
            
            }
          })


        }else{

        }
    // }
      })
    },
    //  QQ搜索
    onSearchStart1(){
        this.friendListData = []
        this.offset=1
        this.onSearch1()
    },
    onSearchStart2(){
        this.friendListData1 = []
        this.groupOffset=1
        this.onSearch2()
    },
    onSearchStart3(){
        this.publicOffset = 1
        this.onSearch3()
    },

    // 查看 QQ好友聊天
    checkWeChatMessage(item,number,offset,time,id){
        
      this.offsetLimit={
        offset:this.offset,
        limit:this.limit,
        label:this.sendData.label,
        msg_offset:offset,
        recovery:this.sendData.recovery,
        msgtime:time,
        id:id

      }
      this.recovery=number
      // this.total=res.data[0].cntlog(item)
      this.$store.commit('SET_QQMESSAGE',Date.parse(new Date()));
      this.chatWithObj=item
      sessionStorage.setItem('flag','friend')
    //   this.showMessageList=true
    //   this.showGroup=false
    //   this.showPublic=false
    },
    // 查看群组聊天
    opemMessageGroupDetials(item,number,offset,time,id){
        
        this.showMessage = true;
        this.offsetLimit={
            offset:this.groupOffset,
            limit:this.groupLimit,
            label:this.sendData.label,
            msg_offset:offset,
            recovery:this.sendData.recovery,
            msgtime:time,
            id:id
        }
      this.recovery=number
      sessionStorage.setItem('flag','group')
      this.$store.commit('SET_QQMESSAGE',Date.parse(new Date()))
      this.chatWithObj=item

    },
    // 初始化请求     账号信息
    init(){
        let nodeData=JSON.parse(sessionStorage.getItem('sumData'))
        let data={
            proof_num:this.sendData.proof_num,
            account_id:Number(this.sendData.account_id),
            username:this.sendData.label,
            model:this.sendData.model
        }
        getWeChatAccountInfo(data).then(res=>{
            this.accountData=res.data[0]
            this.onSearch1()
        })
    },
    onSearch1(b) {

        if(sessionStorage.getItem('searchAll')!==null){
            this.searchWord = sessionStorage.getItem('searchAll')
       }
  
        this.showSearchBox = false;
        let data={
            proof_num:this.sendData.proof_num,
            account_id:Number(this.sendData.account_id),
            searchkey:this.searchWord,
            model:this.sendData.model,
            offset:this.offset,
            limit:this.limit
        }
      searchFunction(data,'/search/tencent/contact_new').then(res=>{
        this.showLoading=false;
        if(res.data.length == 0){
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return;
        }
        for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
          this.friendListData.push(element)
        }
        
          this.total=res.data[0].totle
        if(this.sendData.list_offset){
          let d = JSON.parse(sessionStorage.getItem('only'))
        if(this.sendData.app_name=='好友' &&  d == true){
          
          this.friendListData.forEach(element=>{
            if(element.username==this.sendData.contact_username){
            sessionStorage.setItem('only',false)
              this.checkWeChatMessage(element,0,this.sendData.msg_offset,this.sendData.msgtime,this.sendData.id)
            this.showMessage = true;
            }
          })


        }else{

        }
    }
      }).catch(err=>{
      })
    },
    onSearch3() {
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        searchkey:this.searchWord2,
        model:this.sendData.model,
        offset:this.publicOffset,
        limit:this.publicLimit
      }
      searchFunction(data,'/search/tencent/officialaccounts').then(res=>{
        for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
          this.friendListData.push(element)
        }
        this.total=res.data[0].totle;
        
      })
    },
     openContent(number){

        this.friendListData = [];
        this.friendListData1 = [];
        this.offset = 1;
        this.groupOffset = 1;
        this.publicOffset = 1;
            switch (number) {
                case 'QQ':
                this.show=true;
                this.titleName = 'QQ'

                this.src = require('../../../assets/图标/QQ/qq消息蓝色.png')

                this.srcSelf=require('../../../assets/图标/QQ/qq我.png')
                this.srcQun = require('../../../assets/图标/QQ/qq群.png')
                this.init()
                    break;
                case '我的':
                this.show=false;
                this.srcSelf=require('../../../assets/图标/QQ/qq蓝色我.png')

                this.src = require('../../../assets/图标/QQ/qq消息.png')
                this.srcQun = require('../../../assets/图标/QQ/qq群.png')
                    break;
                case '群组':
                this.titleName = '群组'
                this.show=true;
                this.srcQun=require('../../../assets/图标/QQ/qq群蓝色.png')

                this.src = require('../../../assets/图标/QQ/qq消息.png')
                this.srcSelf=require('../../../assets/图标/QQ/qq我.png')
                this.onSearch2();

                    break;
                             
                default:
                    break;
            }
        },
        opemMessageDetials(item,number,offset){
            this.showMessage = true;
            this.offsetLimit={
                offset:this.offset,
                limit:this.limit, 
                label:this.sendData.label,
                msg_offset:offset,
                recovery:this.sendData.recovery
            }
            this.recovery=number
            // this.total=res.data[0].cntlog(item)
            this.$store.commit('SET_QQMESSAGE',Date.parse(new Date()));
            this.chatWithObj=item
            sessionStorage.setItem('flag','friend')

            if(sessionStorage.getItem('searchAll')!==null){
                // this.searchkey = sessionStorage.getItem('searchAll');
                this.messageSearchWord = sessionStorage.getItem('searchAll');
                
                this.searchWeChatMessage()
            }
        },
        black(){
            this.showMessage = false;
            this.messageSearchWord = ''
            this.$refs.qqChatBox.clearMessage();
        }
    }
}
</script>


<style scoped>
#qqmessageref {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.searchContentBox{
    height: 100%;
    overflow-y: auto;
    padding-bottom: 100px;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 rgb(252, 252, 252);
}

.searchContentBox::-webkit-scrollbar {
  width: 8px;
}

.searchContentBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  border-radius: 2em;
}

.searchContentBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 2em;
}
.highlight {
  color: red;
}
.remarkListItem{
    cursor: pointer;
    display: flex;
    height: 70px;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 10px;
    /* justify-content: space-between; */
    align-items: center;
}
.searchInputWX{
    margin-top: 20px;
    
}

.headerMessage{
    height: 50px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    font-size: 20px;
    position: relative;
}
.searchWX{
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}
.searchWX:hover{
    color: #38c5f9;
    font-weight: bold;
}
.searchWXContent{
    width: 100%;
    height: 100px;
    background: #f5f5f5;
    /* border: 1px solid red; */
    position: absolute;
    top: 50px;
    padding: 5px 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index:1000;
}
.list>div{
    padding-left:20px;
}
.selfInfo{
    height: 170px;
   
    padding: 10px 20px;
    display: flex;
    align-items: center;
}
.headerWX{
    position: sticky;
    top: 0;
    height: 80px;
    border-bottom: 1px solid rgb(224, 224, 224);
    z-index: 1000;
    width: 100%;
    background: #fff;
    flex-shrink: 0;
}
.dateTime{
    position: absolute;
    top: 14px;
    right: 10px;
    color: #bdbdbd;
}
.textwx{
    width: 180px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.wxUserItem{
    height: 70px;
    border-bottom: 1px solid rgb(242, 242, 242);
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.wxUserItem:hover{
    background: #eeeeee;
}
.contentBoxWx{
    position: relative;
    height: 100%;
    overflow-y: auto;
    width: 100%;
    background: #fff;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 rgb(252, 252, 252);
}

.contentBoxWx::-webkit-scrollbar {
  width: 8px;
}

.contentBoxWx::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  border-radius: 2em;
}

.contentBoxWx::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 2em;
}

/* 联系人列表容器滚动条样式 */
.contentBoxWx > div[style*="flex: 1"] {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 rgb(252, 252, 252);
}

.contentBoxWx > div[style*="flex: 1"]::-webkit-scrollbar {
  width: 8px;
}

.contentBoxWx > div[style*="flex: 1"]::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  border-radius: 2em;
}

.contentBoxWx > div[style*="flex: 1"]::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 2em;
}

.flooterBox{
    display: flex;
    padding: 10px 0;
    border-top: 1px solid #e4e4e4;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 1000;
}
.btn2{
    width: 33.3%;
    text-align: center;
    cursor: pointer;
}
.btn2>img{
    display: block;
    margin:0 auto;
}

</style>